<template lang="html">
  <el-drawer
    title="角色权限"
    direction="rtl"
    size="800px"
    :wrapperClosable="false"
    :visible="dialogVisible"
    class="user-draw"
    @close="close"
  >
    <div v-loading="wrapperLoading" class="draw-wrapper">
      <el-form ref="ruleForm" label-width="80px" label-suffix=":" class="m5" label-position="top">
        <el-form-item class="justify-label">
          <add-person v-if="dialogVisible" ref="addPerson" />
        </el-form-item>
        <el-form-item class="justify-label">
          <add-role v-if="dialogVisible" ref="addRole" />
        </el-form-item>
      </el-form>
      <div class="mt10" flex="dir:right">
        <el-button type="primary" :loading="btnLoading" @click="submitData">确定</el-button>
        <el-button class="mr10" @click="close">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import dialogMixin from "mixins/dialogMixin";
import AddRole from "./../add-role";
import AddPerson from "./../add-person";
import { UserRolePermBatch } from "api/sys/user";

export default {
  components: { AddRole, AddPerson },
  mixins: [dialogMixin],
  props: {
    // 选中的数据
    multipleSelection: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    /**
     * 初始化弹窗
     */
    async initForm() {
      await this.$nextTick();
      this.$refs.addPerson && this.$refs.addPerson.initPersonArr(this.multipleSelection);
    },
    /**
     * 提交
     */
    submitData() {
      this._UserRolePermBatch();
    },
    /**
     * 接口请求
     */
    async _UserRolePermBatch() {
      try {
        this.btnLoading = true;
        await UserRolePermBatch(this.getSubmitParams());
        this.$message.success("角色权限配置成功");
        this.$emit("success");
        this.close();
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    },
    /**
     * 获取提交参数
     */
    getSubmitParams() {
      return {
        roleIdList: this.$refs.addRole.getRoleIdList(),
        uidList: this.$refs.addPerson.getUidList(),
      };
    },
  },
};
</script>

<style lang="scss">
.user-draw {
  .el-form-item.is-required:not(.is-no-asterisk)
    .el-form-item__label-wrap
    > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: "";
    margin-right: 0;
  }
  .data-auth-label {
    .text {
      &:before {
        content: "*";
        margin-right: 4px;
        color: #f56c6c;
      }
    }
  }
  .justify-label {
    .el-form-item__label {
      display: block !important;
    }
  }
  .el-tag {
    margin-right: 10px;
  }
}
</style>
